<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Aside',
  data(){
    return{
      studentId: localStorage.getItem('userId')
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 动态构建修改密码的路由路径
    getModifyPwdPath() {
      return `/studentPage/modify-pwd/${this.studentId}`; // 将 studentId 添加到路径中
    },
    // 动态构建修改邮箱的路由路径
    getModifyEmailPath() {
      return `/studentPage/modify-email/${this.studentId}`;
    },
    // 动态构建修改头像的路由路径
    getModifyAvatarPath() {
      return `/studentPage/modify-avatar/${this.studentId}`;
    },
  },
  created() {
    // console.log(this.studentId);
  }
}
</script>

<template>
  <div class="container">
    <el-menu
        default-active="/studentPage"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        router
    >
      <el-menu-item index="/studentPage">
        <span slot="title">我的课程</span>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">个人中心</template>
        <el-menu-item :index="getModifyPwdPath()">修改密码</el-menu-item>
        <el-menu-item :index="getModifyEmailPath()">修改邮箱</el-menu-item>
        <el-menu-item :index="getModifyAvatarPath()">修改头像</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<style scoped>
.container {
  overflow: hidden;
  width: 200px;
  top: 100px;
  color: #333;
  text-align: center;
  z-index: 999;
  position: fixed;
  height: calc(-120px + 100vh);
}


</style>
